<template>
    <v-app dark>
        <v-navigation-drawer v-model="drawer" clipped fixed app>
            <v-list>
                <v-list-tile ripple to="/user">
                    <v-list-tile-action>
                        <v-icon>dashboard</v-icon>
                    </v-list-tile-action>
                    <v-list-tile-content>
                        <v-list-tile-title>控制台</v-list-tile-title>
                    </v-list-tile-content>
                </v-list-tile>
                <v-list-tile ripple @click="">
                    <v-list-tile-action>
                        <v-icon>settings</v-icon>
                    </v-list-tile-action>
                    <v-list-tile-content>
                        <v-list-tile-title>设置</v-list-tile-title>
                    </v-list-tile-content>
                </v-list-tile>
            </v-list>
        </v-navigation-drawer>
        <v-toolbar app fixed clipped-left>
            <v-toolbar-side-icon @click.stop="drawer = !drawer"></v-toolbar-side-icon>
            <v-toolbar-title>Application</v-toolbar-title>
            <v-spacer></v-spacer>
            <v-layout justify-end>
                <v-flex>
                </v-flex>
            </v-layout>
        </v-toolbar>
        <v-content>
            <v-container fluid>
                <router-view></router-view>
            </v-container>
        </v-content>
        <v-footer app fixed>
            <span>&copy; 2018</span>
        </v-footer>
    </v-app>
</template>

<script>
import { mapState } from 'vuex'

    export default {
        name: 'Main',
        data: () => ({
            drawer: true,
        }),
        computed: {
            ...mapState([
                'user'
            ])
        },
        mounted () {

        }
    }
</script>

<style scoped>

</style>